
/**
 * 受控表单组件处理
 * 1.在组件的state中声明一个组件的状态数据
 * 2.将状态数据设置为input标签元素的value属性值
 * 3.为input添加change事件
 * 4.在事件处理程序中，通过事件对象e获取当前文本框最新的值(即用户当前输入的值)
 * 5.在调用setState方法，将文本框的值作为state状态的最新值
 * 
 */
import React from "react"

class InputComponent extends React.Component {
  state = {
    value: 12
  }
  changeValue = (e) => {
    this.setState({
      value: e.target.value
    })

  }
  render () {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.changeValue} />
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent></InputComponent>
    </div>
  )
}

export default App
